<script setup lang="ts">
import { message } from 'ant-design-vue';
import NavBar from '@/components/nav-bar.vue';
import appList from '@/api/pkgs'

const copy = (text) => {
  navigator.clipboard.writeText(text).then(() => {
    message.success('复制成功！')
  }, () => {
    message.error('复制失败！')
  })
}
</script>

<template>
  <nav-bar />

  <div class="pkg-wrapp">
    <div class="tohome">
      <RouterLink to="/">
        < 返回转换页面</RouterLink>
    </div>
    <div class="pkgs">
      <div class="pkg" v-for="pkg in appList">
        <img class="icon" :src="`./pkgs/${pkg.name}.png`" width="68" />
        <div class="pkgname">{{ pkg.name }}</div>
        <div class="pkgid">{{ pkg.package }}</div>
        <a-button @click="copy(pkg.package)">复制包名</a-button>
      </div>
    </div>

  </div>
</template>

<style scoped lang="less">
.pkg-wrapp {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  width: 100%;

  .tohome {
    margin-top:-2rem;
    margin-bottom: 10px;
    a {
      color: #0081ff;
      font-size: 12px;
      text-decoration: none;
    }
  }

  .pkgs {

    display: flex;
    flex-wrap: wrap;

    .pkg {
      width: 33.333%;
      text-align: center;
      margin-bottom: 30px;

      .icon {
        border-radius: 16px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }

      .pkgname {}

      .pkgid {
        color: rgba(0, 0, 0, 0.5);
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
        /* 确保文本在一行内显示 */
        text-overflow: ellipsis;
        /* 使用省略号表示文本超出 */
        padding: 0 10px;
      }

    }


  }
}</style>
